<template>
  <div class="sm-dist-time" :style="timeStyle">
    <div class="sm-header-left-dist" @click="onOpenDistWindow">
      山东省
      <i class="sm-drwon" :style="iconStyle"></i>
    </div>
    <div class="sm-header-left-time">
      {{ vFullDate }}
      <i class="sm-drwon" :style="iconStyle"></i>
    </div>
  </div>
</template>
<script setup>
import { computed } from "vue";
import { getTodayTime } from "@/utils/time";
const vFullDate = computed(() => {
  return getTodayTime("yyyy年MM月");
});

const props = defineProps({
  timeStyle: {
    type: Object,
    default: () => {
      return {
        fontSize: " 0.24rem",
      };
    },
  },
  iconStyle: {
    type: Object,
    default: () => {
      return {
        height: "0.16rem",
        width: "0.16rem",
        top:" 0.03rem",
      };
    },
  },
});

const onOpenDistWindow = () => {
  // visible.value = true;
};
</script>

<style lang="less" scoped>
.sm-dist-time {
  display: flex;
  color: #ffffffb3;
  font-size: 0.24rem;
  position: relative;
  .sm-header-left-dist {
    padding-right: 0.2rem;
    cursor: pointer;
  }

  .sm-drwon {
    height: 0.16rem;
    width: 0.16rem;
    position: relative;
    top: 0.03rem;
    display: inline-block;
    background: url("../../../assets/img/theme1/drow.png");
    background-repeat: no-repeat;
    background-size: cover;
  }
}
</style>
